<template>
  <view class="page">
    <image
      class="bg-img"
      src="/pages/order-subs/static/bg.png"
    />
    <uni-nav-bar
      title="订单详情"
      left-icon="left"
      statusBar
      :backgroundColor="navbarBgColor"
      :color="navbarColor"
      fixed
      :border="false"
      @clickLeft="$tools.back"
    />
    <!-- 顶部信息 -->
    <view
      class="header"
      :style="{ paddingTop: navbarHeight + 'px' }"
    >
      <view class="header-left">
        <view class="header-label">订单已完成</view>
        <view class="header-desc">订单已完成，祝您用餐愉快</view>
      </view>
      <image
        class="header-right"
        src="/pages/order-subs/static/order_finish.png"
      />
    </view>
    <!-- 内容 -->
    <view class="content">
      <view class="shop-ad">
        <image
          class="shop-ad-img"
          src="/pages/order-subs/static/shop_ad.png"
        />
        <image
          class="shop-ad-qrcode"
          src="/pages/order-subs/static/qrcode.png"
        />
      </view>
      <view class="order-info">
        <!-- 雪王币 bar -->
        <view class="coin-bar">
          <image
            class="coin-bar-icon"
            src="/pages/order-subs/static/coin_img.png"
          />
          <view class="coin-bar-tips">本单可获得1400雪王币</view>
          <view
            class="coin-bar-link"
            @tap="toMosushop"
          >
            <text>抽雪王周边</text>
            <uni-icons
              type="right"
              size="12"
              color="#4f1520"
            />
          </view>
        </view>
        <!-- 店铺信息 -->
        <view class="shop-info">
          <view class="shop-info-content">
            <view class="shop-info-name" @tap="toStoreList">
              <text>蜜雪冰城(大学城店)</text>
              <uni-icons
                type="right"
                size="16"
                color="#333"
              />
            </view>
            <view class="shop-info-address">
              <text>直接距离：568m</text>
              <text class="px-sm">|</text>
              <text>广东省深圳市宝安区福永街道龙翔北路56号</text>
            </view>
          </view>
          <view class="shop-info-icons">
            <image
              class="shop-info-icon"
              src="/pages/order-subs/static/icon_navigate.png"
            />
            <image
              class="shop-info-icon"
              src="/pages/order-subs/static/icon_phone.png"
            />
          </view>
        </view>
        <!-- 商品列表 -->
        <view class="product-list">
          <view
            class="product-item"
            v-for="(item, index) in order.orderDetailList"
            :key="index"
          >
            <image
              class="product-img"
              :src="item.productLogo"
            />
            <view class="product-content">
              <view class="d-flex justify-between">
                <view class="product-name">{{ item.productName }}</view>
                <view class="product-price">{{ getProductPrice(item) }}</view>
              </view>
              <view class="product-attrs">{{ getProductAttrText(item) }}</view>
              <view class="product-qty">x {{ item.productAmount }}</view>
            </view>
          </view>
        </view>
        <!-- 订单总结 -->
        <view class="summary">
          <view class="d-flex items-center">
            <text>共{{ order.productCount }}件，合计</text>
            <text class="summary-price">
              ￥{{ $tools.formatPrice(order.price) }}
            </text>
          </view>
          <view class="summary-award">
            <text class="text-warning">奖励140雪王币</text>
            <image
              class="summary-award-icon"
              src="/pages/order-subs/static/snow_icon.png"
            />
            <text class="text-warning">+14甜蜜值</text>
            <text>(1分钟后发放奖励)</text>
          </view>
        </view>
      </view>
      <!-- 广告 -->
      <view class="ad">
        <image
          class="ad-img"
          src="/static/images/base/ad.png"
        />
      </view>
      <!-- 订单额外信息 -->
      <view class="order-extra">
        <view class="order-extra-item">
          <text class="order-extra-label">下单时间</text>
          <text class="order-extra-value">{{ order.orderTime }}</text>
        </view>
        <view class="order-extra-item">
          <text class="order-extra-label">订单编号</text>
          <text class="order-extra-value">{{ order.orderCode }}</text>
        </view>
        <view class="order-extra-item">
          <text class="order-extra-label">取餐号码</text>
          <text class="order-extra-value">{{ order.takeNo }}</text>
        </view>
        <view class="order-extra-item">
          <text class="order-extra-label">备注</text>
          <text class="order-extra-value">
            {{ order.remark || "无" }}
          </text>
        </view>
        <view class="order-extra-item">
          <text class="order-extra-label">门店编码</text>
          <text class="order-extra-value">{{ order.shopCode }}</text>
        </view>
      </view>
    </view>
    <view class="tips">
      <text>如有售后或退款问题，请</text>
      <text class="text-underline">联系门店</text>
    </view>
    <view class="footer">
      <button class="again-btn">再来一单</button>
    </view>
    <!-- 占位空白 -->
    <view class="placeholder"></view>
  </view>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "OrderDetail",
  data() {
    return {
      order: {},
      navbarBgColor: "transparent",
      navbarColor: "#fff",
      navbarHeight: 0
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
    this.order = this.orders.find(item => item.orderId === this.orderId)
    const statuBarHeight = uni.getSystemInfoSync().statusBarHeight
    this.navbarHeight = statuBarHeight + 44
  },
  computed: {
    ...mapState("order", ["orders"]),
    getProductAttrText() {
      return item => item.attrs.map(item => item.attributeName).join(",")
    },
    getProductPrice() {
      return item => `¥${parseFloat(item.productPrice / 100).toFixed(2)}`
    }
  },
  onPageScroll(e) {
    const threshold = uni.upx2px(412) - this.navbarHeight
    if (e.scrollTop > threshold) {
      this.navbarBgColor = "#fff"
      this.navbarColor = "#333"
    } else {
      this.navbarBgColor = "transparent"
      this.navbarColor = "#fff"
    }
  },
  methods: {
    toMosushop() {
      uni.navigateTo({
        url: "/pages/activity/mosushop/mosushop"
      })
    },
    toStoreList() {
      uni.navigateTo({
        url: "/pages/store/list/list"
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  position: relative;
}

.bg-img {
  width: 100%;
  height: 452rpx;
  position: absolute;
  top: 0;
  left: 0;
}

.header {
  position: relative;
  height: 452rpx;
  display: flex;
  padding-left: $uni-spacing-row-xl;

  &-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: #fff;
  }

  &-label {
    font-size: 36rpx;
    font-weight: 600;
    margin-bottom: $uni-spacing-row-base;
  }

  &-desc {
    font-size: 24rpx;
  }

  &-right {
    width: 390rpx;
    height: 270rpx;
  }
}

.content {
  position: relative;
  top: -100rpx;
  border-radius: $uni-border-radius-xxl;
  background-color: $uni-bg-color-grey;
  padding: $uni-spacing-row-xl;
  display: flex;
  flex-direction: column;
  gap: $uni-spacing-row-xl;
}

.shop-ad {
  width: 690rpx;
  height: 216rpx;
  position: relative;

  &-qrcode {
    position: absolute;
    width: 156rpx;
    height: 156rpx;
    right: 30rpx;
    bottom: 30rpx;
  }

  &-img {
    width: 100%;
    height: 100%;
  }
}

.order-info {
  border-radius: $uni-border-radius-xl;
  background-color: #fff;
  padding: $uni-spacing-row-xl;
  display: flex;
  flex-direction: column;
}

.coin-bar {
  display: flex;
  align-items: center;
  padding: $uni-spacing-row-base;
  background-color: #ffdfea;
  border-radius: $uni-border-radius-lg;
  color: #4f1520;
  margin-bottom: $uni-spacing-row-xl;

  &-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: $uni-spacing-row-base;
  }

  &-tips {
    flex: 1;
    font-size: $uni-font-size-base;
  }

  &-link {
    display: flex;
    align-items: center;
    font-size: $uni-font-size-sm;
  }
}

.shop-info {
  display: flex;
  align-items: center;
  padding-bottom: $uni-spacing-row-xl;
  border-bottom: 1px dashed $uni-border-color;

  &-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: $uni-spacing-row-base;
  }

  &-name {
    display: flex;
    align-items: center;
    font-size: $uni-font-size-lg;
  }

  &-address {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
  }

  &-icons {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: $uni-spacing-row-lg;
    margin-left: $uni-spacing-row-base;
  }

  &-icon {
    width: 48rpx;
    height: 49rpx;
  }
}

.product {
  &-list {
    display: flex;
    flex-direction: column;
    border-bottom: 1px dashed $uni-border-color;
  }

  &-item {
    display: flex;
    align-items: center;
    padding: $uni-spacing-row-xl 0;
  }

  &-img {
    width: 140rpx;
    height: 140rpx;
    margin-right: $uni-spacing-row-base;
  }

  &-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: $uni-spacing-row-base;
    color: $uni-text-color;
  }

  &-name {
    font-size: $uni-font-size-lg;
    font-weight: 500;
  }

  &-price {
    font-size: $uni-font-size-base;
  }

  &-attrs {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
  }

  &-qty {
    font-size: $uni-font-size-sm;
  }
}

.summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: $uni-spacing-row-base;
  padding: $uni-spacing-row-xl 0;
  color: $uni-text-color;

  &-price {
    font-size: $uni-font-size-lg;
    font-weight: bold;
  }

  &-award {
    display: flex;
    align-items: center;
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;

    &-icon {
      width: 28rpx;
      height: 29rpx;
    }
  }
}

.ad {
  width: 690rpx;
  height: 177rpx;
  &-img {
    width: 100%;
    height: 100%;
  }
  border-radius: $uni-border-radius-xl;
}

.order-extra {
  border-radius: $uni-border-radius-xl;
  background-color: #fff;
  padding: $uni-spacing-row-xl;
  display: flex;
  flex-direction: column;
  gap: $uni-spacing-row-xl;

  &-item {
    display: flex;
    align-items: center;
  }

  &-label {
    width: 160rpx;
    font-size: $uni-font-size-base;
    color: $uni-text-color-grey;
  }

  &-value {
    flex: 1;
    font-size: $uni-font-size-base;
    color: $uni-text-color;
  }
}

.tips {
  position: relative;
  padding: $uni-spacing-row-base 0;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
  text-align: center;
}

.placeholder {
  height: 120rpx;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  padding: $uni-spacing-row-base $uni-spacing-row-xl;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 10;

  .again-btn {
    width: 180rpx;
    height: 100%;
    background-color: #fff;
    color: $uni-color-primary;
    font-size: $uni-font-size-lg;
    border-radius: $uni-border-radius-lg;
    border: 1px solid $uni-color-primary;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
